<template>
  <el-card class="box-card el-card-flex">
    <div slot="header" class="clearfix">
      <span>
        <i class="el-icon-zoom-in"></i>
        人员查询
      </span>
    </div>
    <!-- 表单 -->
    <div class="text item">
      <el-form @submit.native.prevent :inline="true" :model="AdvancedQuery" class="demo-form-inline" style="float: left;height:43px">
        <!-- 左侧搜索按钮 -->
        <el-form-item>
          <el-input clearable v-model="textSearch" placeholder="请输入人员姓名/代码" style="width:240px;" @keyup.enter.native="getUserListOne"
            @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserListOne"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="advancedQuery">
            高级查询
            <i class="el-icon-magic-stick"></i>
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <div class="el-flex el-box-column">
        <el-table border height="100%" style="border-bottom: 40px solid transparent;" :data="tableData" stripe ref="tableData">
          <el-table-column prop="empName" min-width="100px" label="人员姓名" align="center" sortable show-overflow-tooltip></el-table-column>
          <el-table-column prop="empCode" min-width="100px" label="人员代码" align="center" sortable show-overflow-tooltip></el-table-column>
          <el-table-column prop="gender" min-width="100px" label="性别" align="center" sortable show-overflow-tooltip></el-table-column>
          <el-table-column prop="empStatus" min-width="100px" label="人员状态" align="center" sortable
            show-overflow-tooltip></el-table-column>
          <el-table-column prop="userName" min-width="100px" label="用户名" align="center" sortable show-overflow-tooltip></el-table-column>
          <el-table-column min-width="200px" prop="positionStr" label="所属岗位" align="center" sortable
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag style="cursor: pointer; margin-left: 5px;" size="mini" :title='item' v-for="(item,index) in scope.row.positionStr? scope.row.positionStr.split('、'):[]"
                :key="index">{{item}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sortNo" min-width="100px" label="排序号" align="center" sortable show-overflow-tooltip></el-table-column>
        </el-table>
        <!-- 分页表格 -->
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          background :current-page="currentPage" :page-sizes="[20, 25, 30, 35]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total"></el-pagination>
        <!-- 高级查询抽屉式弹框 -->
        <el-drawer title="高级查询" :visible.sync="dialogVisibleSearch" :before-close="searchClose" direction="rtl"
          custom-class="demo-drawer" ref="drawer" :close-on-press-escape="false">
          <div class="demo-drawer__content el-box-column" style="height: 100%; margin-right:10px;">
            <el-form label-width="90px" ref="AdvancedQuery" :model="AdvancedQuery" class="el-flex">
              <el-form-item label="人员姓名" prop="empName">
                <el-col :span="24">
                  <el-input v-model="AdvancedQuery.empName" placeholder="请输入人员姓名" auto-complete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="人员代码" prop="empCode">
                <el-col :span="24">
                  <el-input v-model="AdvancedQuery.empCode" placeholder="请输入人员代码" auto-complete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="用户名" prop="userName">
                <el-col :span="24">
                  <el-input v-model="AdvancedQuery.userName" placeholder="请输入用户名" auto-complete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="性别" prop="genderId">
                <el-col :span="24">
                  <el-radio-group v-model="AdvancedQuery.gender">
                    <el-radio label="8173e2cf8a034ec8ba575d31341ab449" border>男</el-radio>
                    <el-radio label="d1bb73e68ce249dab653d653cbd6520c" border>女</el-radio>
                  </el-radio-group>
                </el-col>
              </el-form-item>
              <el-form-item label="人员状态" prop="empStatusId">
                <el-col :span="24">
                  <el-radio-group v-model="AdvancedQuery.empStatus">
                    <el-radio label="7b9fe7c7b68a4b8caa8440e8bba573f4" border>在岗</el-radio>
                    <el-radio label="7b620ff955ee47c287b566171737f55e" border>借调</el-radio>
                    <el-radio label="e35fcf272f984d67af5b85ee5fb32117" border>离职</el-radio>
                    <el-radio label="037928ca921b4fe6965179f4de10552d" border>退休</el-radio>
                  </el-radio-group>
                </el-col>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer" style="text-align: right; margin-bottom: 10px; padding-right:10px;">
              <el-button type="primary" @click="getUserListTwo">确定<i class="el-icon-document-checked el-icon--right"></i></el-button>
              <el-button @click="restDrawers">重置
                <i class="el-icon-refresh-left"></i>
              </el-button>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </el-card>
</template>
<script>
  import {
    Tree,
    Dialog,
    Table,
    TableColumn,
    Pagination,
    MessageBox,
    Message,
    Drawer,
    Tag
  } from 'element-ui'
  import {
    employSearch
  } from '@/api/org/peopleSearch/peopleSearch.js'
  export default {
    name: 'trainInvestigate',
    components: {
      'el-table': Table, //表格
      'el-table-column': TableColumn, //表格列
      'el-pagination': Pagination, //分页
      'el-dialog': Dialog, //对话框
      'el-pagination': Pagination, //分页
      'el-drawer': Drawer, //抽屉
      'el-tag': Tag,
    },
    data() {
      return {
        textSearch: '', //搜索按钮
        dialogVisible: false, //新增或修改对话框弹出层
        dialogVisibleSearch: false, //高级查询对话框弹出层
        total: 0, //总条数
        pageSize: 20, //每页展示条数
        currentPage: 1, //默认显示页数
        AdvancedQuery: {},
        tableData: [],
      }
    },
    created() {
      this.getUserList()
      window.onresize = () => {
        this.$refs.tableData.doLayout()
      }
    },
    methods: {
      // 高级查询
      advancedQuery() {
        this.dialogVisibleSearch = true;
      },
      // 获取人员列表数据源
      getUserList() {
        // this.axios.post(`/employee/search/3/?page=${this.currentPage}&size=${this.pageSize}`,{})
        let datas = {
          'page': this.currentPage,
          'size': this.pageSize
        }
        employSearch(3, datas).then(res => {
          if (res.data.code == 10000) {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
            setTimeout(() => {
              this.$refs.tableData.doLayout(); //表格刷新以后，重绘表格宽度
            }, 0)
          }
        })
      },
      getUserListOne() {
        //   this.axios.post(`/employee/search/1/?page=${this.currentPage}&size=${this.pageSize}`,{
        //     empName: this.textSearch,
        //     empCode: Number(this.textSearch)
        //   }
        // )
        let data = {
          'page': this.currentPage,
          'size': this.pageSize
        }
        employSearch(1, data, {
          'empName': this.textSearch,
          'empCode': Number(this.textSearch)
        }).then(res => {
          if (res.data.code == 10000) {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
            setTimeout(() => {
              this.$refs.tableData.doLayout(); //表格刷新以后，重绘表格宽度
            }, 0)
          }
        })
      },
      getUserListTwo() {
        // this.axios.post(`/employee/search/2/?page=${this.currentPage}&size=${this.pageSize}`, {
        //   empName: this.AdvancedQuery.empName,
        //   empCode: Number(this.AdvancedQuery.empCode),
        //   userName: this.AdvancedQuery.userName,
        //   gender: this.AdvancedQuery.gender,
        //   empStatusId: this.AdvancedQuery.empStatus
        // })
        let data = {
          'page': this.currentPage,
          'size': this.pageSize
        }
        employSearch(2, data, {
          empName: this.AdvancedQuery.empName,
          empCode: Number(this.AdvancedQuery.empCode),
          userName: this.AdvancedQuery.userName,
          gender: this.AdvancedQuery.gender,
          empStatusId: this.AdvancedQuery.empStatus
        }).then(res => {
          if (res.data.code == 10000) {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
            this.dialogVisibleSearch = false;
            setTimeout(() => {
              this.$refs.tableData.doLayout(); //表格刷新以后，重绘表格宽度
            }, 0)
          }
        })
      },
      // 每页条数
      handleSizeChange(val) {
        this.pageSize = val
        this.getUserList()
      },
      // 当前页数
      handleCurrentChange(val) {
        this.currentPage = val
        this.getUserList()
      },
      // 高级查询弹框关闭
      searchClose() {
        this.dialogVisibleSearch = false
      },
      restDrawers() { //抽屉重置
        this.dialogVisibleSearch = false
        this.$refs.AdvancedQuery.resetFields()
        this.getUserList()
      },
    }
  }
</script>
<style lang="scss">
  .el-table {
    th {
      padding: 6px 0;
    }

    td {
      padding: 6px 0;
    }
  }

  .el-table__row {
    .cell {
      a {
        color: #409eff;
      }
    }
  }

  .elAdded .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 190px;
  }
</style>
